<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="90px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle">添加课程表</div>
                <div class="appTop"><P>班级课程表</p></div>
                <el-row class='searchCon'>
                    <el-col :span="8">
                        <el-form-item label="班级名称" prop='classId'>
                            <getClass v-model="ruleForm.classId" :schoolId='ruleForm.schoolId' @getClassName='getClassName' @change='changeClass'></getClass>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class='searchCon'>  
                    <el-col :span="8">
                        <el-form-item label="课程表格" prop='classType'>
                            <el-select v-model="ruleForm.classType" placeholder="请选择课程表格" style="width:100%">
                                <el-option v-for="item in ruleForm.syllabusType" :key="item.order" :label="item.syllabusName" :value="item.order">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="appTop"><P>班表</p></div>
                <el-row v-if='ruleForm.showList'>
                    <div class='tableSmall' v-if="ruleForm.classType=='0'">
                        <smallSyllabus ref='getSmallData'></smallSyllabus>
                    </div>
                    <div class='tableBig' v-if="ruleForm.classType=='1'">
                        <bigSyllabus ref='getBigData'></bigSyllabus>
                    </div>
                </el-row>
                <div class="footer">
                    <el-button @click='resetForm'>返 回</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadingBtn">保 存</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import smallSyllabus from './comps/smallSyllabus';
import bigSyllabus from './comps/bigSyllabus';
import school from 'components/SchoolClasss/school';
import getClass from 'components/SchoolClasss/class';
import { mapGetters } from 'vuex';
import {saveWisdomSubject, getWisdomSubjectIsExist} from 'api/wisdom';
export default{
    name: 'addSyllabus',
    components: {Levelbar, smallSyllabus, bigSyllabus, school, getClass},
    data() {
        // 判断班级是否添加过科目
        var loginUserName = (rule, value, callback) => {
            if (value =='') {
                callback(new Error('请选择班级'));
            } else {
                getWisdomSubjectIsExist(value).then(response => {
                    if (response.data.content == true) {               
                        callback(new Error('该班级已添加过课程表'));
                    } else {
                        callback();
                    }
                }) 
            }
        };
        return {
            loadingBtn: false,
            ruleForm: {
                classId: '',
                schoolId: '',
                schoolName: '',
                className: '',
                showList: false, // 是否显示课程表
                classType: '0', // 表格类型
                sSubjectName: [], // 课程表
                syllabusType: [
                    {
                        order: '0',
                        syllabusName: '5*8 班表格式'
                    }, {
                        order: '1',
                        syllabusName: '7*12 班表格式'
                    }
                ]
            },
            rules: {
                schoolId: [
                    { required: true, message: '请选择学校', trigger: 'change' }
                ],
                classId: [
                    { required: true, validator: loginUserName, trigger: 'change' }
                ],
                classType: [
                    { required: true, message: '请选择班表类型', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters([
            'schoolId',
            'schoolName'
        ])
    },
    methods: {
        // 提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.ruleForm.showList == false) {
                        this.$message({
                            type: 'error',
                            message: '没有添加课程表'
                        })
                        return;
                    }
                    this.$confirm('确定要添加课程表吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.ruleForm.sSubjectName = this.ruleForm.classType == '0' ? this.$refs.getSmallData.getDataApply() : this.$refs.getBigData.getDataApply();
                        this.loadingBtn = true;
                        saveWisdomSubject(this.schoolId, this.ruleForm.classType, this.schoolName, this.ruleForm.classId, this.ruleForm.className, this.ruleForm.sSubjectName).then(response => {
                            this.loadingBtn = false;              
                            this.$message({
                                type: 'success',
                                message: '保存课程表成功'
                            });
                            this.$store.dispatch('UpdateCache');// 添加
                            window.history.back()
                        }).catch(() => {
                            this.loadingBtn = false;
                        });
                    }) 
                }
            });
        },
        // 获取学校名称
        getSchoolName(a) {
            this.ruleForm.schoolName = a;
        },
        // 获取班级名称
        getClassName(a) {
            this.ruleForm.className = a;
        },
        // 改变班级
        changeClass(classId) {
            if (classId == '') {
                this.ruleForm.showList = false;
            } else {
                getWisdomSubjectIsExist(classId).then(response => {
                    if (response.data.content == false) {               
                        this.ruleForm.showList = true; // 整个列表是否显示
                    } else {
                        this.ruleForm.showList = false;
                    }
                })
            }
        },
        resetForm() {
            window.history.back();
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:100px;
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .appTop{
            position: relative;
            font-size: 14px;
            color: rgb(106, 85, 72);
            padding-left: 16px;
            margin: 30px 0;
            display: block;
            &::after {
                position: absolute;
                content:'';
                width: 4px;
                height: 14px;
                background: #ff5e2c;
                left: 0;
                top: 3px;
            }
        }
        .box{
            padding: 0px 50px 0;
            background:#fff;
        }
       .footer{
            text-align:center;
            margin-top:90px;
        }
        .tableSmall{
            width:100%;
            height:420px;
        }
        .tableBig{
            width:100%;
            height:560px;
        }
    }
    
}

</style>
